<template>
  <div>
    <div class="display-table">
      <div class="display-table-cell">
        <div >
          <el-button style="" @click="handleClick" type="success" round>完善个人信息</el-button>
        </div>
        <div id="login_box" style="">
          <h2>个人信息</h2>
          <div class="more_info" style="margin-top: 40px;text-align: left;margin-left: 40px;">
            <div class="item" style="margin-top: 20px;">
              <span class="info-title">用户名 : </span>
              <span class="info-body">{{userInfo.userName}}</span>
            </div>
            <div class="item" style="margin-top: 10px;">
              <span class="info-title">昵称 : </span>
              <span class="info-body">{{userInfo.userNickname}}</span>
            </div>

            <div class="item" style="margin-top: 10px;">
              <span class="info-title">绑定电话: </span>
              <span class="info-body">{{userInfo.userPhone}}</span>
            </div>

            <div class="item" style="margin-top: 10px;">
              <span class="info-title">邮箱 : </span>
              <span class="info-body">{{userInfo.userEmail}}</span>
            </div>

            <el-dialog :visible.sync="showUpdateWindow" width="30%">
              <template slot="title">
                <div style="font-size:18px;font-weight: 999;">完善个人信息</div>
              </template>
              <div style="width: 400px;">
                <el-form :model="user" label-width="100px" status-icon :rules="rules" ref="user" class="demo-ruleForm">
                  <el-form-item label="用户名" prop="userName">
                    <el-input disabled v-model="user.userName"></el-input>
                  </el-form-item>
                  <el-form-item label="联系方式" prop="userPhone">
                    <el-input disabled v-model="user.userPhone"></el-input>
                  </el-form-item>
                  <el-form-item label="昵称" prop="userNickname">
                    <el-input v-model="user.userNickname"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="userEmail">
                    <el-input v-model="user.userEmail"></el-input>
                  </el-form-item>
                  <el-button style="margin-left: 100px;" type="primary" @click="submitForm('user')">立即完善</el-button>
                  <el-button @click="resetForm('user')">清除</el-button>
                </el-form>
              </div>
            </el-dialog>
          </div>
        </div>
        <!--.more_info-->
      </div>
      <!--.display-table-cell-->
    </div>
  </div>
</template>

<script>
  export default {
    name: "SingleInfo",
    data() {
      return {
        userInfo: {},
        user: {
          userName:'',
          userPhone:'',
          userEmail:'',
          userNickname:''
        },
        rules: {
          userName: [{
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入用户名"));
              }
              callback();
            }
          }],
          userPhone: [{
            required: true,
            message: '请输入电话',
            trigger: 'blur'
          }],
          userEmail: [{
            required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入邮箱"));
              }
              //它的意思是 当符合要求的条件的时候，就触发回调函数。这个回调的函数是显示成功的标识
              setTimeout(() => {
                if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/.test(value)) {
                  return callback(new Error('邮箱格式有误'));
                } else {
                  callback();
                }
              }, 500);
            }
          }],
          userNickname: [{
            required: true,
            message: '请输入昵称',
            trigger: 'blur'
          }]
        },
        showUpdateWindow: false
      };
    },
    methods: {
      handleClick() {
        this.user = JSON.parse(sessionStorage.getItem("loginUser"))
        this.showUpdateWindow = true;
      },
      submitForm(user) {
        this.$refs[user].validate((valid) => {
          if (valid) {
            this.$http.post("/userInfo/user/completeUserInfo", this.user).then(resp => {
              alert(resp.data.message)
              this.userInfo = resp.data.data
              this.resetForm(user)
              this.showUpdateWindow = false;
              sessionStorage.loginUser=JSON.stringify(resp.data.data)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(user) {
        this.$refs[user].resetFields();
      }
    },
    created() {
      this.userInfo = JSON.parse(sessionStorage.getItem("loginUser"))
      console.log(this.userInfo)
    },
    mounted() {}
  }
</script>

<style scoped>
  @import '../../assets/css/bootstrap.css';
  @import '../../assets/css/splitlayout.css';
  @import '../../assets/css/singleInfo.css';
</style>

<style>

</style>
